<template>
	<view class="">
		<u-navbar :is-back="false" title="素材中心">
			<image src="../../static/添加.png" mode="" @click="dianji" class="add"></image>
		</u-navbar>
		<view class="wrap">
			<u-swiper :list="list" mode="dot" :height="320"></u-swiper>
		</view>
		<!-- 筛选 -->
		<view class="sxbox">
			<view :class="current==index?'selecttitle':'title'" v-for="(item,index) in guesslist" :key="index"
				@click="screen(index)">
				{{item}}
			</view>
		</view>

		<!-- 内容 -->
		<view class="sxneir" @click="particulars">
			<image src="../../static/ad.png" mode="" class="ad"></image>
			<view class="title">
				339旋转餐厅.秋季钜惠.周末节假日适用
			</view>
			<view class="introduce">
				【339旋转餐厅.周末节假日适用】西部第一高塔云端旋转自助
				餐厅!城市的地标打卡点！俯瞰万家灯火，独享云
			</view>
			<view class="hr"></view>
			<view class="btnbox">
				<view class="letfbox">
					<image src="../../static/logo.png" mode="" class="head"></image>
					<view class="namebox">
						<view class="name">
							小可爱就是赢得快
						</view>
						<view class="time">
							2021-09-03
						</view>
					</view>
				</view>
				<view class="rightbox">
					<text>
						<image src="../../static/shar.png" style="width: 25rpx;height: 26rpx;" mode="" class="share"></image>
					</text>
					<text class="ifonum">
						<image src="../../static/方气泡聊.png" mode=""></image>52
					</text>
					<text class="look">
						<image src="../../static/浏览量.png" mode=""></image>10
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg'
					}
				],
				guesslist: ["猜你喜欢", "商品推荐", "无需预约", "即将下架"],
				current: 0
			}
		},
		methods: {
			dianji() {
				this.jumpLink({link:'/pagesB/Published_material/index'})
			},
			screen(v) {
				this.current = v
			},
			// 素材详情
			particulars() {
				this.jumpLink({
					link: "/pages/material_Particulars/index"
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.add {
		margin-left: 677rpx;
		width: 44rpx;
		height: 44rpx;
	}

	// 轮播图
	.wrap {
		width: 700rpx;
		height: 320rpx;
		border-radius: 12rpx;
		margin-left: 25rpx;
		margin-top: 20rpx;
	}

	// 筛选
	.sxbox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;

		.title {
			width: 164rpx;
			height: 56rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			line-height: 56rpx;
			text-align: center;
			font-family: MicrosoftYaHei;
			font-size: 26rpx;
			color: #666666;
		}

		.selecttitle {
			width: 164rpx;
			height: 56rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			line-height: 56rpx;
			text-align: center;
			font-family: MicrosoftYaHei;
			font-size: 26rpx;
			color: #fb5e24;
		}
	}

	.sxneir {
		width: 700rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		margin-left: 25rpx;
		margin-top: 33rpx;
		background-color: #FFF;
		margin-bottom: 10rpx;
		padding-bottom: 23rpx;
		box-sizing: border-box;
		position: relative;

		.ad {
			width: 700rpx;
			height: 343rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
		}

		.title {
			font-family: MicrosoftYaHei-Bold;
			font-size: 30rpx;
			color: #222222;
			font-weight: 700;
			margin-top: 15rpx;
			margin-left: 20rpx;
		}

		.introduce {
			margin-top: 10rpx;
			font-family: MicrosoftYaHei;
			font-size: 24rpx;
			line-height: 38rpx;
			color: #444444;
			overflow: hidden; //超出隐藏
			text-overflow: ellipsis; //超出使用省略号
			display: -webkit-box;
			-webkit-line-clamp: 2; //第几行
			-webkit-box-orient: vertical;
			width: 670rpx; //根据需要自定义设置
			margin-left: 20rpx;
		}

		.hr {
			width: 700rpx;
			height: 1rpx;
			background-color: #dcdcdc;
			margin-top: 20rpx;
		}

		.btnbox {
			display: flex;
			justify-content: space-between;
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-top: 30rpx;


			.letfbox {
				display: flex;
				align-items: center;

				.head {
					width: 65rpx;
					height: 65rpx;
					border-radius: 65rpx;
				}

				.namebox {
					margin-left: 20rpx;

					.name {
						font-family: MicrosoftYaHei;
						font-size: 26rpx;
						color: #444444;
					}

					.time {
						font-family: MicrosoftYaHei;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}

			.rightbox {
				display: flex;
				margin-top: 25rpx;

				.share {
					width: 25rpx;
					height: 26rpx;
				}

				.ifonum {
					margin-left: 37rpx;

					image {
						width: 28rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}

				.look {
					margin-left: 37rpx;

					image {
						width: 32rpx;
						height: 18rpx;
						margin-right: 10rpx;
					}
				}

				text {
					font-family: MicrosoftYaHei;
					font-size: 24rpx;
					color: #999999;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
